<template>
	<el-button type="success" text @click="exportTable">
		导出数据
	</el-button>
	<!-- Form增加 -->
	<el-dialog v-model="dialogFormVisible" title="抽奖项目">
		<el-form :model="form">
			<el-form-item label="主题" :label-width="formLabelWidth">
				<el-input v-model="form.name" autocomplete="off" />
			</el-form-item>
			<el-form-item label="奖品名称" :label-width="formLabelWidth">
				<el-input v-model="form.title" autocomplete="off" />
			</el-form-item>
			<el-form-item label="奖品数量" :label-width="formLabelWidth">
				<el-input v-model="form.num" autocomplete="off" />
			</el-form-item>
			<el-form-item label="抽奖状态" :label-width="formLabelWidth">
				<el-select v-model="form.cjzt" placeholder="请选择抽奖状态" size="large">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="开奖时间" :label-width="formLabelWidth">
				<el-date-picker :disabledDate="disabledDateFun" v-model="form.kjtime" type="date" placeholder="选择日期" />
			</el-form-item>
			<el-form-item label="缩略图" :label-width="formLabelWidth">
				<el-upload class="avatar-uploader" :action="`${api}/index.php/index/goodses/uploadfile`" :data="jm()"
					:show-file-list="false" :on-success="(file) => { editImgsProps({ file, key: 'img' }) }">
					<img v-if="form.img" :src="ifImgHeader(form.img)" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="详情图片" :label-width="formLabelWidth">
				<el-upload class="avatar-uploader" :action="`${api}/index.php/index/goodses/uploadfile`" :data="jm()"
					:show-file-list="false" :on-success="(file) => { editImgsProps({ file, key: 'images' }) }">
					<img v-if="form.images" :src="ifImgHeader(form.images)" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>

		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取消</el-button>
				<el-button type="primary" @click="postData">
					确定
				</el-button>
			</span>
		</template>
	</el-dialog>


	<el-table :data="tableData" style="width: 100%" id="table">
		<el-table-column fixed prop="company" label="公司" width="200" align="center" />
		<el-table-column fixed prop="address" label="地址" width="300" align="center" />
		<el-table-column fixed prop="name" label="姓名" width="100" align="center" />
		<el-table-column fixed prop="numbers" label="手机" width="150" align="center" />
		<el-table-column fixed prop="email" label="邮箱" width="150" align="center" />
		<el-table-column fixed prop="jypp" label="经营品牌" width="150" align="center" />
		<el-table-column fixed prop="sqcity" label="申请授权城市" width="180" align="center" />
		<el-table-column fixed prop="sqcitys" label="详细地址" width="200" align="center" />
		<el-table-column fixed prop="xzly" label="选址理由" width="200" align="center" />
		<el-table-column fixed prop="njdmj" label="拟建店面积" width="100" align="center" />
		<el-table-column fixed prop="njdtime" label="拟建店时间" width="100" align="center" />
		<el-table-column fixed prop="gdzc" label="固定资产" width="100" align="center" />
		<el-table-column fixed prop="hbzj" label="货币资金" width="100" align="center" />
		<el-table-column prop="yyzz" label="营业执照" width="200" align="center">
			<template #default="scope">
				<img style="width: 100px; height: 100px" :src="scope.row.yyzz">
			</template>
		</el-table-column>
		<el-table-column fixed prop="jrly" label="想成为经销商理由" width="200" align="center" />

	</el-table>
</template>
<script>
import UploadFile from 'element-plus'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

import {
	ElMessageBox,
	ElMessage
} from 'element-plus'
export default {
	components: {
		[UploadFile.name]: UploadFile
	},
	data() {
		return {
			HttpImg: "http://gyycadmincss.hansn.cn",
			tableData: [],
			form: [],
			form1: [],
			dialogFormVisible: false,
			dialogFormVisible1: false,
			formLabelWidth: '120px',
			imageUrl: "",
			options: [{
				value: '0',
				label: '未发布'
			}, {
				value: '1',
				label: '活动中'
			}],
			value: '',
			id: ''
		}
	},
	mounted() {
		this.getData()
	},
	methods: {

		exportTable(){
      let fix = document.querySelector('.el-table__fixed');
      let wb;
			var xlsxParam = { raw: true }
      if(fix){ //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
        wb = XLSX.utils.table_to_book(document.querySelector('#table').removeChild(fix),xlsxParam);
        document.querySelector('#table').appendChild(fix);
      }else{

        wb = XLSX.utils.table_to_book(document.querySelector('#table'),xlsxParam);
      }
      let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheet.xlsx')
      } catch (e) { 
          if (typeof console !== 'undefined') console.log(e, wbout) 
      }
      return wbout
    },

		add() {
			this.form.name = "";
			this.form.kjtime = "";
			this.form.cjzt = "";
			this.form.images = "";
			this.form.img = "";
			this.form.title = "";
			this.form.num = "";
			this.dialogFormVisible = true;
			this.id = ""
		},
		del(id) {
			ElMessageBox.confirm(
				'是否确定删除?',
				'', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
			)
				.then(() => {
					this.$http.post("/index.php/index/goodses/cjdel", {
						id: id
					}).then(res => {
						if (res.code == 200) {
							this.getData()
							ElMessage({
								message: '删除成功',
								type: 'success',
							})
						}
					})
				})
				.catch(() => {

				})


		},
		eid(id) {
			this.dialogFormVisible = true;
			this.id = id;
			this.$http.post("index.php/index/goodses/cjshow", {
				id: id
			}).then(res => {
				if (res.code == 200) {
					this.form = res.data[0]
					this.form.kjtime = this.getLocalTime(res.data[0].kjtime)
					if (res.data[0].cjzt == '0') {
						this.value = "未发布"
					} else if (res.data[0].cjzt == '1') {
						this.value = "活动中"
					} else {
						this.value = "已结束"
					}
					console.log("kjtime", this.form.kjtime)
					console.log("cjzt", this.value)
				}
			})
		},
		// updateData() {
		// 	let data1 = {
		// 		id: this.form1.id,
		// 		name: this.form1.name,
		// 		cjzt: this.form1.cjzt,
		// 		kjtime:this.getTimeFormat(this.form1.kjtime),
		// 		images: this.form1.images,
		// 		twlink: this.form1.twlink,
		// 	}
		// 	console.log(data1)
		// 	this.$http.post("/index.php/index/goodses/cjupdate", data1).then(res => {
		// 		if (res.code == 200) {
		// 			this.dialogFormVisible1 = false;
		// 			this.getData()
		// 		 }
		// 	 })
		// },
		getData() {
			this.tableData = []
			this.$http.post("/index.php/index/jxs/jxslist").then(res => {
				console.log(res)
				this.tableData = res.data;

			})
		},
		postData() {
			// this.form.cjzt = this.value;
			let data = {
				name: this.form.name,
				cjzt: this.form.cjzt,
				kjtime: this.getTimeFormat(this.form.kjtime),
				images: this.form.images,
				img: this.form.img,
				title: this.form.title,
				num: this.form.num,
				twlink: this.form.twlink,
				id: this.id
			}
			this.$http.post(this.id ? "/index.php/index/goodses/cjupdate" : "/index.php/index/goodses/cjadd", data).then(res => {
				if (res.code == 200) {
					this.dialogFormVisible = false;
					this.id = ""
					ElMessage({
						message: this.id ? '编辑成功' : '新增成功',
						type: 'success',
					})
					this.getData()
				}
			})
		},
		getTimeFormat(zcTime) {
			let time = (new Date(zcTime).getTime()) / 1000; //除1000 是变成秒级的时间戳 不除就是毫秒级
			return time;
		},
		disabledDateFun(time) {
			return time.getTime() < Date.now() - 8.64e7;
		},
		formatEmployment(type) {
			// 根据源数据经过处理 把处理之后的数据返回
			// 定义一个映射结构
			const map = {
				0: '未发布',
				1: '活动中',
				2: '已结束',
			}
			return map[type]
		},
		getLocalTime(nS) {
			return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
		}
	}
}
</script>
<style>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;

}
</style>
